<template>
  <div>
<!-- 公告信息 -->
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div class="box">
        <div style="flex: 0 1 33%;">
          <p style="margin-bottom: 50px; font-size: 18px; font-weight: 700;">公告表单</p>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">

            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="context">
                <el-input v-model="form.context" style="width: 80%" placeholder="请输入内容" type="textarea" autosize>
                </el-input>
              </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">发布</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>

        </div>
        <div style="flex: 0 1 60%;">
          <p style="font-size: 18px; font-weight: 700;">历史公告</p>
          <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
               <div style="margin-left: 40px; display: flex;">
                    <p style="font-weight: 700;">具体内容:</p>
                   <div style="width: 70%;margin-left: 14px;">
                    <p>{{ props.row.context }}</p>
                   </div>

               </div>
              </template>
            </el-table-column>
            <el-table-column label="#" type="index" />
            <el-table-column v-if="false" label="编号" prop="Id" />
            <el-table-column label="标题" prop="title" />
            <el-table-column label="发布日期" prop="publishDate" />
            <el-table-column label="内容" prop="context">

              <template slot-scope="scope">
                <p style="width:120px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;">{{ scope.row.context }}</p>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status">

              <template slot-scope="scope">
                <el-tag v-if="scope.row.status" type="primary" effect="dark">公开</el-tag>
                <el-tag v-else type="info" effect="dark">隐藏</el-tag>

              </template>
            </el-table-column>
            <el-table-column label="操作" width="150px">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="mini" v-if="scope.row.status" type="danger"
                  @click="handleDelete(scope.$index, scope.row, 0)">隐藏
                </el-button>
                <el-button size="mini" v-else type="success" @click="handleDelete(scope.$index, scope.row, 1)">公开
                </el-button>
              </template>
            </el-table-column>

          </el-table>
          <div style="margin: 10px 0">
            <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[5, 10]" :total="total"
              layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
          <el-dialog :visible.sync="dialogVisible" title="修改内容" width="50%" @close="cancel" top="30px">
            <el-form ref="updateform" :model="updateform" :rules="updaterules" label-width="120px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="updateform.title" style="width: 80%" placeholder="请输入标题"></el-input>
              </el-form-item>
              <el-form-item label="内容" prop="context">
                <el-input v-model="updateform.context" style="width: 80%" placeholder="请输入内容" type="textarea" autosize>
                </el-input>
              </el-form-item>

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>


    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  name: "applyabsentRoom",
  data() {

    return {
      currentPage: 1,
      pageSize: 5,
      total: 1,
      updateform: {
          id: null,
          title: null,
          context:null,
          publishDate:null,
          status: null
      },
      status: "",
      loading: false,
      dialogVisible: false,
      updateIndex:null,
      form: {
        title: null,
        context: null,
      },
      tableData: [
        {
          id: 1,
          title: '雨天',
          context: '请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞请不要山上打伞',
          publishDate: '2023-11-2',
          status: 1
        }
      ],
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
        context: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ]

      },
      updaterules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
        context: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ]

      },

    }
  },
  created() {

    this.loading = true;
    this.load();
   
  },
  methods: {
    handleDelete(index, row, status) {
      if (!status) {
        this.$confirm("你确定隐藏" + row.title + "吗？", {
          iconClass: "el-icon-question", //自定义图标样式
          confirmButtonText: "确认", //确认按钮文字
          cancelButtonText: "取消", //取消按钮文字
          showClose: true, //是否显示右上角关闭按钮
          type: "warning", //提示类型  success/info/warning/error
        }).then(() => {
          request.get("/notice/updatestatus",{
            params:{
              id:row.id,
              status:status
            }
          }).then(res=>{
            if(res.code==='1'){
              this.tableData[index].status = status
              this.$message({
                type:"success",
                message:"修改成功"
              })
            }else{
              this.$message({
                type:"error",
                message:"修改失败"
              })
            }
          })
        
        })
      } else {
        this.tableData[index].status = status
      }

    },
    handleEdit(index, row) {
      console.log(row)
      this.dialogVisible = true
      this.updateform.title = row.title
      this.updateform.context = row.context
      this.updateform.id = row.id
      this.updateform.publishDate = row.publishDate
      this.updateform.status = row.status
      this.updateIndex = index
      console.log(this.updateform)
    },
    cancel() {
      this.dialogVisible = false
      this.updateform =  {
           id: null,
          title: null,
          context:null,
          publishDate:null,
          status: null
      }
    },
    async load() {
      
      request.get("/notice/adminlist", {
          params:{
            pageNum:this.currentPage,
            pageSize:this.pageSize
          }
      }).then(res=>{
          if(res.code==="1"){
              this.loading = false
              this.tableData = res.data.list
              this.total = res.data.total
          }
      })
    },
    async save(){
      this.dialogVisible = false
      //发送请求
      this.$refs.updateform.validate(valid=>{
        if(valid){
          request.put("/notice/update",this.updateform).then(res=>{
          
          if(res.code ==='1'){
              this.load()
              this.$message({
                type:"success",
                message:"修改成功"
              })
          }else{
            this.$message({
                type:"error",
                message:"修改失败"
              })
          }
        })
        }
      })
       
    },
    async onSubmit() {
      this.$refs.form.validate(vaild=>{
          if(vaild){
              request.post("/notice/add",this.form).then(res=>{
                  if(res.code==="1"){
                      this.$message({
                      type:'success',
                      message:'成功发布'
                      })
                      this.load();
                      this.form={};
                  }
                  else{
                      this.$message({
                      type:'error',
                      message:res.msg
                      })
                  }
              })
          }

      })
    },
    reset() {
      this.form = {}
    },
    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变页码
      this.currentPage = pageNum;
      this.load();
    },
  }
}
</script>

<style scoped>
.box {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>